<template>
<h2>demo08-event02-keyup.vue</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">keyup</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        回车提交：<input class="zhtt-input" @keyup.enter="submitForm"><br/>
      </p>
      <p class="zhtt-line">
        page-down提交：<input class="zhtt-input" @keyup.page-down="submitForm">
      </p>
      <p class="zhtt-line">
        delete提交：<input class="zhtt-input" @keyup.delete="submitForm">
      </p>
      <p class="zhtt-line">
        alt+enter提交：<input class="zhtt-input" @keyup.alt.enter="submitForm">
      </p>
      <p class="zhtt-line">
        ctrl+click提交：<input class="zhtt-input"  @click.ctrl="submitForm">
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">exact 修饰符</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        即使 Alt 和 Shift 被一同按下时也会触发<br/>
        ctrl+click(可以有其他任意键按下)：<input class="zhtt-input" @click.ctrl="submitForm"><br/>
      </p>
      <p class="zhtt-line">
        有且只有 Ctrl 被按下的时候才触发，如果点击时，<br/>
        ctrl+click(不可有其他任意键按下)：<input class="zhtt-input" @click.ctrl.exact="submitForm"><br/>
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
</template>

<script>
export default {
  name: "demo08-devent02-keyup",
  methods:{
    submitForm(){
      alert('表单提交');
    }
  }
}
</script>

<style scoped>

</style>